<template>
  <el-dialog
    v-model="visible"
    :width="screenWidth"
    :fullscreen="mobile === 'mobile'"
    :title="dialogSelectCorp.title"
    draggable
    :close-delay="200"
    close-icon="CloseBold"
    @close="closeDialog()"
  >
    <div class="app-container">
      <div class="search-container">
        <el-form ref="queryFormRef" :model="queryParams" :inline="true">
          <el-form-item label="关键字" prop="keywords">
            <el-input
              v-model="queryParams.keywords"
              placeholder="请输入关键字"
              clearable
              style="width: 200px"
              @keyup.enter="handleQuery"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleQuery"><i-ep-search />搜索</el-button>
            <el-button @click="resetQuery">
              <i-ep-refresh />
              重置</el-button
            >
          </el-form-item>
        </el-form>
      </div>

      <!--      <el-card shadow="never">-->
      <el-table v-loading="loading" :data="corpList" highlight-current-row border height="200" @row-click="rowClick">
        <!-- <el-table-column type="selection" width="50" align="center" /> -->
        <el-table-column label="序号" type="index" width="60" align="center"></el-table-column>
        <el-table-column key="name" label="企业名称" align="center" prop="name" width="260" />
        <el-table-column key="code" label="企业社会信用代码" align="center" prop="code" width="160" />
        <el-table-column key="linkMan" label="企业联系人" align="center" width="160" prop="linkMan"> </el-table-column>
        <el-table-column key="linkTel" label="企业联系人电话" align="center" width="160" prop="linkTel">
          <template #default="scope">
            <span>{{ hideMobile(scope.row.linkTel) }}</span>
          </template>
        </el-table-column>
        <!-- <el-table-column label="操作" fixed="right" width="">
          <template #default="scope">
            <el-button type="" size="small" @click="select(scope.row)"
              >选择</el-button
            >
          </template>
        </el-table-column> -->
      </el-table>

      <pagination
        v-if="total > 0"
        v-model:total="total"
        v-model:page="queryParams.pageIndex"
        v-model:limit="queryParams.pageSize"
        @pagination="handleQuery"
      />
      <!--      </el-card>-->
    </div>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref, reactive, toRaw, computed } from "vue";
import { old_getCorpList, getCorpList_zb, getCorpList_manager } from "@/api/common/corp/index";
import { CorpListType, ParamsType } from "@/api/common/corp/type";

import { useScreen } from "@/store/modules/screen";

const screenStore = useScreen();
const mobile = computed(() => screenStore.device);
const screenWidth = ref(900);

function initScreen() {
  if (mobile.value === "mobile") {
    screenWidth.value = screenStore.screenWidth;
  } else {
    screenWidth.value = 900;
  }
}

const emit = defineEmits(["corpSendClose", "zbCorpSendClose", "jlCorpSendClose"]);
const instance = getCurrentInstance();
let { proxy, ctx } = instance;
const props = defineProps({
  dialogSelectCorp: {
    type: Object,
    default: () => ({
      visible: false,
      title: "选择企业",
      id: 0,
      corpId: 0,
    }),
  },
  corpListQuery: {
    type: String,
    default: () => "manager",
  },
});
const visible = ref(props.dialogSelectCorp.visible);
let loading = ref(false);

const queryFormRef = ref<ElForm>();
const corpList = ref<CorpListType[]>();
const queryParams = reactive<ParamsType>({
  pageIndex: 1,
  pageSize: 20,
});
let total = ref(0);

/* 发送关闭信息并返回选择信息 */
function corpSendClose(corpInfo, query) {
  emit("corpSendClose", corpInfo, query);
}

/* 发送关闭信息并返回选择信息 */
function zbCorpSendClose(corpInfo, query) {
  emit("zbCorpSendClose", corpInfo, query);
}

/* 发送关闭信息并返回选择信息 */
function jlCorpSendClose(corpInfo, query) {
  emit("jlCorpSendClose", corpInfo, query);
}

const rowClick = function (row: any, column: any, event: any) {
  select(row);
};

/**
 * 返回隐藏手机号
 */
function hideMobile(mobile: string) {
  if (!mobile) return "";
  //获取本地缓存种的accessToken
  const accessToken = localStorage.getItem("accessToken");
  if (!accessToken) mobile = mobile.replace(/(\d{3})\d{4}(\d{4})/, "$1****$2");
  return mobile;
}

/* 选择企业 */
function select(corpInfo) {
  // corpSendClose(toRaw(corpInfo));
  closeDialog(corpInfo, true);
}

/**
 * 关闭弹窗
 */
function closeDialog(corpInfo, query) {
  // resetForm();
  visible.value = false;
  corpSendClose(corpInfo, query);
  jlCorpSendClose(corpInfo, query);
  zbCorpSendClose(corpInfo, query);
}

/**
 * 重置表单
 */
function resetForm() {
  queryFormRef.value.resetFields();
  queryFormRef.value.clearValidate();
}

/* 列表查询 */
async function handleQuery() {
  let list;
  loading.value = true;
  if (props.corpListQuery === "common") {
    list = await old_getCorpList(queryParams);
  } else if (props.corpListQuery === "team") {
    list = await getCorpList_manager(queryParams);
  } else {
    list = await getCorpList_zb(queryParams);
  }
  if (list.type === 0) {
    if (list.success) {
      if (props.corpListQuery === "team") {
        corpList.value = list.data;
      } else {
        corpList.value = list.data.list;
        queryParams.pageIndex = list.data.pageNum;
        queryParams.pageSize = list.data.pageSize;
        total.value = list.data.total;
      }
    } else {
      ElMessage.error(list.msg);
    }
  } else {
    ElMessage.error(list.msg);
  }
  loading.value = false;
}

/**
 * 重置查询
 */
function resetQuery() {
  queryFormRef.value.resetFields();
  queryParams.pageIndex = 1;
  queryParams.pageSize = 20;
  handleQuery();
}

onMounted(() => {
  initScreen();

  handleQuery();
});

onUnmounted(() => {});
</script>

<style lang="scss" scoped>
.app-container {
  padding: 0px;
}
</style>
